<template>
  <div>
  <div class="sidebar">
    <el-row class="tac">
      <el-col>
        <div class="sidebar-button">
          <el-button type="text" @click="toggleCollapse" >
            <el-icon :class="{'el-icon-arrow-down': !isCollapse, 'el-icon-arrow-up': isCollapse}" size="20px" color="#606266">
              <!-- 这里使用 Element UI 的内置图标来表示折叠和展开状态 -->
              <Operation />
            </el-icon>
          </el-button>
        </div>
        <el-menu
            default-active="Backend"
            text-color="#202aa2"
            :collapse="isCollapse"
            router
            style="height: 100vh;background-color: #FAFCFF;--el-menu-hover-bg-color: #FAFCFF;"
        >
          <el-sub-menu index="Personnel">
            <template #title>
              <el-icon><House/></el-icon>
              <span>人员管理</span>
            </template>
              <el-menu-item index="user" :to="{name: 'user'}">用户管理</el-menu-item>
              <el-menu-item index="employee" :to="{ name: 'employee' }">员工管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="goods">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="classification">种类管理</el-menu-item>
            <el-menu-item index="flower">鲜花管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="order">订单管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </div></div>
</template>

<script setup>

import {
  Location,
  Setting,
  Menu,
  Operation,
  Expand,
  UserFilled,
  GoodsFilled,
  Goods,
  List, Memo, CopyDocument, House
} from "@element-plus/icons-vue";
import {ref} from "vue";
const isCollapse = ref(true)
// 定义一个方法来切换 isCollapse 的值
function toggleCollapse() {
  isCollapse.value = !isCollapse.value;
}

// 处理菜单打开事件的函数（可选）
function handleOpen(key, keyPath) {
  console.log('Menu opened:', key, keyPath);
}

// 处理菜单关闭事件的函数（可选）
function handleClose(key, keyPath) {
  console.log('Menu closed:', key, keyPath);
}
</script>

<style scoped>
.p{
  height: 85px;
  background-color: #FAFCFF;
  text-align: center;
  font-weight: bold;
  border-right: #E6E8EB 1px solid;
  font-family: 微軟正黑體;
}

.el-menu-item{
  text-decoration: none;
}
.el-menu-item{
  color: #0e0c0c;
}
.el-menu-item:hover{
  color: #ffffff;
  background-color: #92e1da;
}
.sidebar-button{
  background-color: #F2F6FC;
  width: 100%;
  text-align: center;
}
.el-icon{
  color: #70433a;
}
</style>